<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	onLoad((options: any)=>{
		console.log("param-gId:" + options.gId)
	})
	let infoGroup = reactive({
		id:45,
		name:'月季1',
		url:'https://uview-plus.jiangruyi.com/album/1.jpg',
		intro:'月季1月季1月季1月季1月季1月季1月季1月季1',
		recommendation: 21,
		follow:51,
		checked:true
	})
	let groupDetailTabs = ref([
		{name: '笔记'},
		{name: '视频'},
		{name: '活动'}
	])
	let groupDetailChoose=ref('笔记')
	function onGroupDetailTabsClickHandler(item: any){
		groupDetailChoose.value = item.name
		console.log("item-name:" + groupDetailChoose.value)
	}
</script>

<template>
	<view class="container">
		<view style="background-color: #FFFFFF;">
			<view style="display: flex; flex-direction: row;margin: 10rpx 0 10rpx 10rpx;">
				<up-image :show-loading="true" :src="infoGroup.url" width="80px" height="80px" radius="10rpx"></up-image>
				<view style="display: flex; flex-direction: column; ">
					<view style="display: flex; flex-direction: row; justify-content: space-between;">
						<span>{{infoGroup.name}}</span>
					</view>
					<up-text :text="infoGroup.intro">
					</up-text>
				</view>
			</view>
			<up-divider text="" :hairline="true"></up-divider>
			<view style="display: flex;flex-direction: row; justify-content: space-between; margin: 0rpx 40rpx 10rpx 40rpx;">
				<view style="display: flex; flex-direction: row; justify-content: center;">
					<up-icon name="plus-people-fill" size="20"></up-icon>
					<span style="font-size: 28rpx;">{{infoGroup.follow}}</span>
				</view>
				<view style="display: flex; flex-direction: row; justify-content: center;">
					<up-icon name="heart-fill" size="20"></up-icon>
					<span style="font-size: 28rpx;">{{infoGroup.recommendation}}</span>
				</view>
				<view style="display: flex; flex-direction: row; justify-content: center;">
					<up-icon name="file-text" size="20"></up-icon>
					<span style="font-size: 28rpx;">{{infoGroup.recommendation}}</span>
				</view>
			</view>
		</view>
		
		<view>
			<view class="groupHead">
				<up-tabs :list="groupDetailTabs" @click="onGroupDetailTabsClickHandler"></up-tabs>
				<!-- <view style="padding: 20rpx;">
					<up-search placeholder="请输入关键词" v-model="keyword" :clearabled="true" ></up-search>
				</view> -->
			</view>
			<view v-if="groupDetailChoose==='笔记'">笔记	</view>
			<view v-if="groupDetailChoose==='视频'">视频</view>
			<view v-if="groupDetailChoose==='活动'">活动</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	page{
		background-color: rgb(240, 240, 240);
	}
	.container{
		height: auto; 
		display: flex; 
		flex-direction: column; 
		justify-content: top; 
		margin: 20rpx;
		// border: 1rpx green solid;
	}
	.groupHead{
		background-color: #ffffff;
		margin: 10rpx 0rpx 0rpx 0rpx;
	}
</style>
